<template>
    <div class="big-container">
        <div class="title-box">
            <span class="mycourse">课程添加编辑</span>
            <el-button round class="returnBtn" @click="returnPre">返回</el-button>
        </div>
        <el-form :model="form" label-width="120px" class="info-box">
            <el-form-item label="课程名称" >
                <el-input 
                v-model="form.name" />
            </el-form-item>

            <el-form-item label="课程图片" >
                <template #tip>
                    <div class="el-upload__tip text-red">
                    limit 1 file, new file will cover the old file
                    </div>
                </template>
                <el-upload
                    ref="upload"
                    class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    :limit="1"

                    :auto-upload="false"
                >
                    <template #trigger>
                    <el-button type="primary">上传图片</el-button>
                    </template>
                </el-upload>
            </el-form-item>

             <el-form-item label="添加视频地址" >
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="课程时长">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="最多上课人数">
                <el-input v-model="form.name" />
            </el-form-item>

            <el-form-item label="教练">
                <el-select v-model="form.region" placeholder="选择教练">
                    <el-option label="Zone one" value="coach1" />
                    <el-option label="Zone two" value="coach2" />
                </el-select>
            </el-form-item>
            <el-form-item label="课计类型">
                <el-select v-model="form.region" placeholder="固定课时费">
                    <el-option label="固定课时费" value="coach1" />
                    <el-option label="按上课人数收费" value="coach2" />
                </el-select>
            </el-form-item>
            <el-form-item label="课时费">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="课堂备注">
                <el-input v-model="form.name" placeholder="50字内"/>
            </el-form-item>
            <el-form-item label="课程标签">
                <el-input v-model="form.name" placeholder="请输入标签名称"/>
            </el-form-item>
            <el-form-item label="课程介绍">
                <el-input v-model="form.desc" type="textarea" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
    
    

</template>

<script lang="ts">
import { defineComponent,reactive,onBeforeMount  } from 'vue';
import {useRouter,useRoute} from 'vue-router'


export default defineComponent({
    name: "ChangeCourseInfo",
    setup() {
        const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
            })

        const route=useRoute();
        const router=useRouter();//获取路由对象

        //点击保存
        function onSubmit(){

        }
        //点击返回上一页
        function returnPre(){
            router.back()
        }
        return{
            form,
           
            onSubmit,
            returnPre
        }
    }
})
</script>

<style scoped>
    .big-container{
        height:100%;
        /* padding:10px 20px; */
        border:0.5px solid rgb(169, 167, 167);
        border-radius: 10px;
    }
    .title-box{
        display: flex;
        justify-content: space-between;
        background-color: rgb(200, 198, 198);
        height:50px;
        line-height: 50px;
        border-radius: 10px 10px 0 0;
    }
    .mycourse{
        margin:auto 15px;
    }
    .returnBtn{
        margin:auto 15px;
        
    }
    .info-box{
        width: 70%;
        margin: 20px auto;
    }
    
</style>